<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Login Form Template</title>

    <!-- CSS -->
    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="assets/css/form-elements.css">
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="shortcut icon" href="assets/ico/favicon.png">

</head>

<body>
    <div class="top-content">

        <div class="inner-bg">
            <div class="container">
                <div class="row">
                    <div class="col-sm-8 col-sm-offset-2 text">
                        <h3><strong>战斗小队---</strong>爱生活，爱撸代码</h3>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-6 col-sm-offset-3 form-box">
                        <div class="form-top">
                            <div class="form-top-left">
                                <h3>欢迎您来的我们的网站</h3>
                                <p>输入您的用户名和密码登录</p>
                            </div>
                            <div class="form-top-right">
                                <i class="fa fa-lock"></i>
                            </div>
                        </div>
                        <div class="form-bottom">
                            <form role="form" action="" method="post" class="login-form">
                                <div class="form-group">
                                    <label class="sr-only" for="form-username">Username</label>
                                    <input type="text" name="form-username" placeholder="用户名" class="form-username form-control" id="form-username">
                                </div>
                                <div class="form-group">
                                    <label class="sr-only" for="form-password">Password</label>
                                    <input type="password" name="form-password" placeholder="密码" class="form-password form-control" id="form-password">
                                </div>
                                <button type="submit" class="btn">登录</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>


    <!-- Javascript -->
    <script src="assets/js/jquery-1.11.1.min.js"></script>
    <script src="assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="assets/js/jquery.backstretch.min.js"></script>
    <script src="assets/js/scripts.js"></script>
    <script>
        $(function() {
            // 正则验证
            var aName = false;

            function rName(name) {
                var regExp = /^[\u4E00-\u9FA5A-Za-z0-9_]+$/;
                if (regExp.test(name)) {
                    aName = true;
                } else if (name == "") {
                    alert('请输入的用户名!');
                } else {
                    alert('请输入的用户格式数错误！');
                    aName = false;
                }
            };
            var aPass = false;

            function rPass(pass) {
                var regExp = /^[A-Za-z0-9]{6,16}$/;
                if (regExp.test(pass)) {
                    aPass = true;
                } else if (pass == "") {
                    alert('请输入的密码!');
                } else {
                    alert('请输入的密码格式数错误！');
                    $('#form-password').val('');
                    aPass = false;
                }
            };

            // 用户名失去光标事件
            $('#form-username').blur(function() {
                var uname = $('#form-username').val();
                rName(uname);
            });
            // 密码失去光标事件
            $('#form-password').blur(function() {
                var uPass = $('#form-password').val();
                rPass(uPass);
            });

            // 注册
            $('.btn').click(function() {
                if (aName && aPass) {
                    window.location.href = 'login.html';
                    // setTimeout(function() {
                    //     window.location.href = 'login.html';
                    // }, 1800);
                } else {
                    var uPass = $('#form-password').val();
                    rPass(uPass);
                }

            });
        })
    </script>

</body>

</html>